<template>
  <div>
    <div class="center-w">
      <div class="head">
        <div class="title">文章管理</div>
        <div>
          <el-button type="success" @click="addClick">添加文章</el-button>
          <el-input
            prefix-icon="el-icon-search"
            style="width: 150px;"
            v-model="pageparm.name"
            placeholder=""
            clearable
            @input="searchClick"
          ></el-input>
        </div>
      </div>
      <div style="overflow-y: scroll;height: 100%;">
        <el-table :data="tableData">
          <el-table-column align="center" type="index"></el-table-column>
          <el-table-column
            show-overflow-tooltip
            align="center"
            prop="title"
            label="文章名"
          >
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            align="center"
            prop="author"
            label="作者"
          ></el-table-column>
          <el-table-column align="center" prop="img" label="封面">
            <template slot-scope="scope">
              <el-image
                style="width: 40px; height: 40px;"
                :src="scope.row.img"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="sort"
            label="排序"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="publicationTime"
            label="发表时间"
          ></el-table-column>

          <el-table-column
            align="center"
            prop="operate"
            label="操作"
            width="220"
          >
            <template slot-scope="scope">
              <el-button
                @click="editClick(scope.row)"
                size="mini"
                type="primary"
                >编辑</el-button
              >
              <el-button @click="delClick(scope.row)" size="mini" type="danger"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <Pagination
        v-bind:child-msg="pageparm"
        @callFather="callFather"
      ></Pagination>
    </div>
    <problemCom ref="problemCom" @getProblem="getProblem" />
  </div>
</template>

<script>
import problemCom from "./components/problemCom";
import Pagination from "../../components/Pagination";

import { getArticleList, delectArticle } from "../../api/article";
export default {
  components: { problemCom, Pagination },
  data() {
    return {
      v: "", // 搜索数据
      // 表格数据
      tableData: [],
      //分页
      pageparm: {
        pageIndex: 1,
        size: 10,
        total: 1
      }
    };
  },
  methods: {
    // 获取问题列表
    getProblem(v) {
      if (v) this.pageparm.name = v;
      getArticleList(this.pageparm).then(res => {
        if (res.code == 200 && res.data) {
          let { items, totalCount } = res.data;
          this.tableData = items;
          this.pageparm.total = totalCount;
        } else {
          this.tableData = [];
        }
      });
    },

    // 添加按钮
    addClick() {
      this.$refs.problemCom.code = "add";
      this.$refs.problemCom.isShow = true;
    },

    // 编辑按钮
    editClick(row) {
      this.$refs.problemCom.code = "edit";
      this.$refs.problemCom.form = JSON.parse(JSON.stringify(row));
      this.$refs.problemCom.isShow = true;
    },

    //删除按钮
    delClick(row) {
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // 调用删除接口
          delectArticle(row.id).then(() => {
            this.$message.success("删除成功！");
            this.getProblem();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    // 分页插件事件
    callFather(parm) {
      this.pageparm.pageIndex = parm.pageIndex;
      this.pageparm.size = parm.size;
      this._getCouponList();
    },

    //搜索事件
    searchClick(v) {
      this.getProblem(v);
    }
  },
  created() {
    this.getProblem();
  }
};
</script>

<style lang="less" scoped>
.center-w {
  display: flex;
  /* align-items: center; */
  flex-direction: column;
  background-color: #fff;
  height: 85vh;
  padding: 20px;
  border: 1px solid #ccc;
  margin: 20px;
}

.title {
  color: rgba(16, 16, 16, 1);
  font-size: 20px;
  margin-bottom: 10px;
}

.active {
  color: rgb(124, 134, 244) !important;
}

.head {
  display: flex;
  margin-bottom: 20px;
  align-items: center;
  justify-content: space-between;
}
</style>
